<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>云收藏</title>
    <script src="js/vue.min.js"></script>
    <script src="js/axios.min.js"></script>
    <link rel="stylesheet" href="js/ele-2.15.7/theme-chalk/index.css">
    <script src="js/ele-2.15.7/index.js"></script>
</head>
<body>
<div id="app">
    <header>
        <div class="c900 flex">
            <a href="./"><h1 style="color: #fdfdfd">云收藏</h1></a>
            <span v-if="myinfo == null" class="flex">
                <a href="register.html">注册</a>
                <a href="login.html" @click.prevent="loginFormVisible = true">登录</a>
            </span>
            <span v-else class="flex">
                <a><el-avatar :src="myinfo.head"></el-avatar></a>
                欢迎 {{myinfo.name}}
                <a href="logout.s">退出</a>
            </span>
        </div>
    </header>
    <main class="c900">
        <el-dialog title="收藏链接地址" :visible.sync="dialogFormVisible">
            <el-form :model="fav">
                <el-form-item label="链接名称" :label-width="formLabelWidth">
                    <el-input v-model="fav.flabel" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="链接地址" :label-width="formLabelWidth">
                    <el-input v-model="fav.furl" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="链接描述" :label-width="formLabelWidth">
                    <el-input v-model="fav.fdesc" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="链接分类" :label-width="formLabelWidth">
                    <el-input v-model="fav.ftags" autocomplete="off"></el-input>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="dialogFormVisible = false">取 消</el-button>
                <el-button type="primary" @click="addFav">确 定</el-button>
            </div>
        </el-dialog>

        <el-dialog title="登录" :visible.sync="loginFormVisible">
            <el-form :model="user">
                <el-form-item label="账号" :label-width="formLabelWidth">
                    <el-input v-model="user.name" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="密码" :label-width="formLabelWidth">
                    <el-input v-model="user.pwd" autocomplete="off"></el-input>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="loginFormVisible = false">取 消</el-button>
                <el-button type="primary" @click="login">确 定</el-button>
            </div>
        </el-dialog>

        <el-container>
            <el-aside>
                <el-menu>
                    <el-menu-item>
                        <i class="el-icon-menu"></i>
                        <el-button @click="dialogFormVisible = true" style="width: 80%">收藏新链接</el-button>
                    </el-menu-item>
                    <el-menu-item>
                        <i class="el-icon-menu"></i>
                        <el-button @click="showAllFav" style="width: 80%">全部链接</el-button>
                    </el-menu-item>
                    <el-menu-item>
                        <i class="el-icon-menu"></i>
                        <el-button style="width: 80%">未分类</el-button>
                    </el-menu-item>
<!--                    以下是数据库中的分类-->
                    <el-menu-item v-for="tag in tags">
                        <i class="el-icon-menu"></i>
                        <el-button @click="currentTag = tag; yunTuFlag = false" style="width: 80%">{{tag.tname}} {{tag.tcount}}</el-button>
                    </el-menu-item>

                    <el-menu-item>
                        <i class="el-icon-menu"></i>
                        <el-button @click="showYunTu" style="width: 80%">云图</el-button>
                    </el-menu-item>
                </el-menu>
            </el-aside>
            <el-main>
                <div v-if="yunTuFlag == false && currentTag">
                    <el-card v-for="fav in currentTag.favorites"
                             style="margin-block: 10px;">
                        <div style="display: flex;
                             justify-content: space-between;
                             align-items: center">
                            <div>
                                <el-link :href="fav.furl">{{fav.flabel}}</el-link><br>
                                {{fav.fdesc}}
                            </div>
                            <el-button @click="delFav(fav.fid)">删除</el-button>
                        </div>
                    </el-card>
                </div>
                <div v-if="yunTuFlag == true">
                    <span v-for="tag in tags"
                          :style="{fontSize: getFontSize(tag)}"
                          style="background-color: #ccc; margin: 5px; padding: 5px 10px; border-radius: 10px; display: inline-block">
                        {{tag.tname}}
                    </span>
                </div>
            </el-main>
        </el-container>

    </main>
</div>
<script>
    var v = new Vue({
        el : "#app",
        data : {
            dialogFormVisible : false,
            formLabelWidth : 100,
            fav:{ flabel: "", furl: "", fdesc: "", ftags: ""},
            tags : [],
            currentTag : null,
            yunTuFlag : false,
            // 全部链接
            allFavs : [],
            user: {name:"", pwd:""},
            loginFormVisible : false,
            myinfo : null
        },
        created() {
            // this.queryAllTag();
        },
        methods : {
            addFav(){
                let p = new URLSearchParams();
                p.append("flabel", this.fav.flabel);
                p.append("furl", this.fav.furl);
                p.append("fdesc", this.fav.fdesc);
                p.append("ftags", this.fav.ftags);
                axios.post("addFav", p).then(res=>{
                    if(res.data.code == 1){
                        this.$message(res.data.msg);
                        // 清空输入
                        this.fav = { flabel: "", furl: "", fdesc: "", ftags: ""};
                        // 关闭窗口
                        this.dialogFormVisible = false;
                        this.queryAllTag();
                    } else {
                        this.$alert(res.data.msg);
                    }
                });

            },
            showAllFav(){
                this.yunTuFlag = false;
                this.currentTag = {favorites : this.allFavs};
            },
            queryAllTag(){
                axios.get("queryTag").then(res=>{
                    if(res.data.code){
                        this.tags = res.data.data;
                    }
                    // 统计全部链接数组
                    let favs = new Array();
                    this.tags.forEach(tag=>{
                        tag.favorites.forEach(fav=>{
                            // 在 favs 数组中查找 fav 对象, 如果没有, 则添加该链接
                            if(favs.find(f=>f.fid==fav.fid) == undefined){
                                favs.push(fav);
                            }
                        })
                    });
                    this.allFavs = favs;
                });
            },
            showYunTu(){
                this.yunTuFlag = true;
            },
            getFontSize(tag){
                // 计算全部链接
                // this.showAllFav(); ==> vue 锁死
                let all = this.allFavs.length;
                // 计算字体大小
                let rate = tag.tcount / all * 50;
                rate = parseInt(rate);
                let size = rate + "px";
                return size;
            },
            login(){
                let p = new URLSearchParams();
                p.append("name", this.user.name);
                p.append("pwd", this.user.pwd);
                axios.post("login.s", p).then(res=>{
                    if(res.data.code == 1){
                        this.myinfo = res.data.data;
                        this.$message(res.data.msg);
                        this.queryAllTag();
                        this.loginFormVisible = false;
                    } else {
                        this.$alert(res.data.msg);
                    }
                });
            },
            delFav(fid){
                axios.get("delFav?fid=" + fid).then(res=>{
                    if(res.data.code){
                        this.$message("删除成功!");
                        this.queryAllTag();
                        // 移除当前分类里该链接
                        this.currentTag.favorites =
                            this.currentTag.favorites.filter(f=> {
                                return f.fid != fid;
                            })
                    } else {
                        this.$alert("删除失败!");
                    }
                })
            }
        }
    })
</script>
</body>
</html>

<style>
    html,body,#app{
        height: 100%;
    }
    body{
        margin: 0px;
        padding: 0px;
        background-size: cover;
    }
    a{
        text-decoration: none;
        color: #666
    }
    img{
        width: 100%;
        object-fit: cover;
        border-radius: 5px;
    }
    .c900{
        width: 900px;
        margin-inline: auto;
    }
    .flex{
        display: flex;
        justify-content: space-between;
        align-items: center;
        flex-wrap: wrap;
    }
    .grid2{
        display: grid;
        grid-gap: 10px;
        grid-template-columns: auto auto;
    }
    .grid3{
        display: grid;
        grid-template-columns: auto auto auto;
    }
    .grid4{
        display: grid;
        grid-template-columns: auto auto auto auto;
    }
    header{
        background-color: #0f9ae0;
        background-size: cover;
        position: sticky;
        top: 0px;
        z-index: 1;
        height: 60px;
    }
    header h1{
        margin: 10px;
    }
    header span>a{
        margin-left: 20px;
        color: #fff;
    }
    main{
        background-color: #eee;
        min-height: calc(100% - 100px);
        padding: 20px;
    }
</style>